<template>
  <div>
     <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>订单列表</el-breadcrumb-item>
    </el-breadcrumb> 

    <!-- 主体 -->
    <el-card class="box-card">
        <el-input placeholder="请输入内容" v-model="queryinfo.query" class="input-with-select" @input="getOrders">
            <el-button slot="append" icon="el-icon-search" @click="getOrders"></el-button>
        </el-input>

        <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
                type="index"
                label="#">
            </el-table-column>
            <el-table-column
                prop="order_number"
                label="订单编号">
            </el-table-column>
            <el-table-column
                prop="order_price"
                label="订单价格">
            </el-table-column>
            <el-table-column
                label="是否付款">
                <template slot-scope="scope">
                    <div>
                        <el-tag :type="typeObj[scope.row.order_pay]">{{scope.row.order_pay | fukuan}}</el-tag>
                        
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                prop="is_send"
                label="是否发货">
            </el-table-column>
            <el-table-column
                label="下单时间">
                <template slot-scope="scope">
                    <div>
                        {{new Date(scope.row.create_time * 1000).toLocaleString() }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                size="mini"
                type="primary"   
                class="el-icon-edit"
                @click="edit(scope.row)"></el-button>
                <el-button
                size="mini"
                type="success"
                class="el-icon-location"
                @click="dizi(scope.row)"
                ></el-button>
            </template>
            </el-table-column>
        </el-table>
        <!-- 物流 -->
        <el-dialog title="查看物流进度" :visible.sync="dialogFormVisible1">
            <el-timeline :reverse="reverse">
                <el-timeline-item
                v-for="(activity, index) in wuliu"
                :key="index"
                :timestamp="activity.time">
                {{activity.context}} 
                </el-timeline-item>
            </el-timeline>

            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div>
        </el-dialog>

    <!-- 修改地址 -->
        <el-dialog title="修改地址" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="省市区/县" :label-width="formLabelWidth">
                    <el-cascader
                    v-model="value"
                    :options="city"
                    :props="defaultProps"
                    @change="handleChange"></el-cascader>
                </el-form-item>
                <el-form-item label="详细地址" :label-width="formLabelWidth">
                    <el-input class="input" v-model="form.name" autocomplete="off" placeholder="请输入详细地址"></el-input>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div>
        </el-dialog>

          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryinfo.pagenum"
            :page-sizes="[3, 5, 10, 20]"
            :page-size="queryinfo.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>

    </el-card>
  </div>
</template>

<script>
import { ordersApi } from "@/http/api";
import city from "@/mock/city";
import wuliu from "@/mock/wuliu";
// console.log('城市：', city);
export default {
    data() {
        return {
            reverse:false,
            defaultProps:{
                expandTrigger: 'hover' ,
                lable:'lable',
                value:'value',
                children:'children'
            },
            city,
            wuliu:wuliu.data,
            tableData:[],
            value:'',
            queryinfo:{
                query:'',
                pagenum:1,
                pagesize:10 ,
            },
            total:0,
            typeObj:{
                0:'danger',
                1:'warning'
            },
             dialogFormVisible: false,
             dialogFormVisible1:false,
             form:{
                name:'',
             },
             formLabelWidth: '120px'
        }
    },
    created(){
        this.getOrders()
    },
    methods:{
        async getOrders(){
            const res = await ordersApi(this.queryinfo)
            console.log('订单渲染',res);
            this.tableData = res.goods
            this.total = res.total
        },
        dizi(){
            this.dialogFormVisible1 = true
        },
        edit(){
            this.dialogFormVisible = true
        },
        handleChange(value) {
        console.log(value);
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.queryinfo.pagesize = val
        this.getOrders()
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.queryinfo.pagenum = val
        this.getOrders()
      },
    }
}
</script>

<style>
.box-card{
    margin: 10px 0;
}
.el-table{
    margin: 10px 0;
}
.input-with-select{
    width: 300px;
}
.input{
    width: 300px;

}
</style>